<template>
  <section class="h5-wrap">
    <div class="msg-wrap f-r ai-c">
      <img :src="require('@/assets/img/index/avator.jpg')">
      <p>calmax</p>
    </div>

    <ul class="entrys">
      <li
        v-for="(item, index) in entrys"
        :key="index"
        class="f-r ai-c jc-sb"
        @click="entryClickHandler(item)"
      >
        <div class="left f-r ai-c">
          <van-icon name="audio" />
          <p>{{ item.label }}</p>
        </div>
        <van-icon name="arrow" />
      </li>
    </ul>

    <BottomNavigation />
  </section>
</template>
<script>
import { BottomNavigation } from '@/components'
export default {
  name: 'MY',
  components: {
    BottomNavigation
  },
  data () {
    return {
      entrys: [{
        label: '入口0',
        url: ''
      }, {
        label: '入口1',
        url: ''
      }, {
        label: '入口2',
        url: ''
      }, {
        label: '入口3',
        url: ''
      }]
    }
  },
  methods: {
    entryClickHandler (item) {
      console.log('item: ', item)
      this.$toast('敬请期待')
    }
  }
}
</script>
<style lang="less" scoped>
section {
  min-height: 100vh;
  .msg-wrap {
    padding: 40px 16px 20px;
    background: linear-gradient(1turn,hsla(0,0%,100%,.42),rgba(253,253,255,.42) 40%,#fdfdff 42%,rgba(170,197,255,.42));
    > img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    > p {
      font-size: 20px;
      font-weight: bolder;
      margin-left: 9px;
    }
  }

  .entrys {
    position: relative;
    overflow: hidden;
    width: 343px;
    margin: 10px 16px;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.08);
    li {
      padding: 20px 0;
      border-bottom: thin solid #ededee;
      &:last-child {
        border-bottom: none;
      }
      .left {
        > p {
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
